<template>
  <div class="wrap">
      <header>
          <router-link to="/myhome" class="img">
          <img src="lt.jpg" alt="">
          </router-link>
          <span class="faq">常见问题-慕课网</span>
          <span class="rig">...</span>
      </header>
      <section>
          <!-- <div class="logn"> -->
              <Zia v-for="(v,i) in arr" :key="i" :imga="v.imga" :title="v.title|part" :imgb="v.imgb" />
              <!-- <span class="tp"><img src="k_03.jpg" alt=""></span>
              <div class="t1"> 
                  <span class="m">慕课网</span>
                  <span class="g">&gt;</span>
              </div> -->
          <!-- </div> -->
        
      </section>
      <footer>
          <div class="data">
              热门问题
          </div>
          <Zib v-for="(v,i) in arr1" :key="i" :title="v.title|part"/>
      </footer>
  </div>
</template>

<script>
import Zia from "./zia.vue"
import Zib from "./zib.vue"
export default {
    components:{
        Zia,Zib
    },
    data(){
        return{
            arr:[
                {imga:"k_03.jpg",title:"慕课网",imgb:"k2.jpg"},
                {imga:"k_06.jpg",title:"体系课&实战课",imgb:"k2.jpg"},
                {imga:"k_08.jpg",title:"云服务&Git仓库",imgb:"k2.jpg"},
                {imga:"k_10.jpg",title:"手记&猿问",imgb:"k2.jpg"},
                {imga:"k_12.jpg",title:"新闻",imgb:"k2.jpg"},
                {imga:"k_14.jpg",title:"全部分类",imgb:"k2.jpg"}
            ],
            arr1:[
                {title:"什么是大前端课程?"},
                {title:"为什么我不能使用花呗分期?"},
                {title:"如何使用花呗分期付款?"},
                {title:"如何创建自己的课程仓库?"},
                {title:"什么是慕课网Git?"},
                {title:"实战课程有开始或结束时间限制吗?"},
                {title:"iPhone、iPad端购买课程问题?"},
                {title:"购买了就业班课程可以开发票吗?"},
                {title:"“零基础就业”?"},
                {title:"什么是大前端课程?"},
                {title:"什么是大前端课程?"},
                {title:"什么是大前端课程?"},
                {title:"什么是大前端课程?"}

            ]
        }
    }
}
</script>

<style scoped>
    .wrap{
        width: 100%;
        height: 10.4rem;
        background-color:#f3f4f6;
    }
    header{
        height: 0.4rem;
        line-height: 0.4rem;
        background-color: white;
    }
    .img{
        position: relative;
        left: 0.2rem;
    }
    .faq{
        font-size: 0.16rem;
        font-weight: bold;
        margin-left: 1.2rem;
    }
    .rig{
        font-size: 0.16rem;
        font-weight: bold;
        margin-left: 1rem;
    }
    section{
        width: 100%;
        height: 3.6rem;
        background-color: white;
    }
    footer{
        width: 100%;
        height: 6.44rem;
        background-color:white;;
        margin-top: 0.08rem;
    }
    .data{
        width: 88%;
        height:0.46rem ;
        margin: 0 auto;
        font-size: 0.16rem;
        line-height: 0.46rem;
        /* background-color: red; */
    }
    /* .logn{
        width: 88%;
        height:0.6rem ;
        margin: 0 auto;
        line-height: 0.76rem;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #cccc;
    } */
    /* .tp{
        width: 0.44rem;
        height: 0.6rem;
        border-radius: 50%;
    } */
    /* .t1{
        flex: 1;
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.15rem;
    } */
    /* .g{
        margin-left: 2.2rem;
        color: #cccc;
    } */
</style>